<template>
<body>
  <LoginHeader></LoginHeader>
		<div class="middle-bg">
			<div class="main">
				<div class="login-panel">
					<ul class="tab">
						<li class="signIn current" id="signIn" @click="status_change1">用户名登录</li>
						<li class="register" id="register" @click="status_change2">快速注册</li>
					</ul>
          <form v-show="status" method="POST"  @submit.prevent="login">
					  <div class="signIn-content">
						<div class="section-input">
							<input type="text" class="phone" v-model="model.username" placeholder="请输入用户名" />
						</div>
						<div class="section-input">
							<input type="password" class="password" v-model="model.password" placeholder="请输入密码" />
						</div>
						<button class="btn J_submit" id="submit_btn_id" type="submit">登录</button>
					  </div>
          </form>
          <form v-show="!status" method="POST"  @submit.prevent="regist">
					<div class="register-content">
						<div class="section-input">
							<input type="text" class="phone" v-model="model.username" placeholder="输入姓名以快速注册" />
						</div>
						<div class="section-input">
							<input type="password" class="password" v-model="model.password" placeholder="请输入密码" />
						</div>
						<button class="btn J_submit" id="register_btn_id" type="submit">注册</button>
					</div>
          </form>
				</div>
			</div>
		</div>
		<div class="bottom-bg">
			<p>Copyright@2019 方友鑫小组</p>
		</div>
</body>
</template>
    
<script>
import LoginHeader from '../components/LoginHeader'
  export default {
    components:{
    LoginHeader,
  },
    data(){
      return{
        model:{},
        status:true
      }
    },
    methods:{
      async login(){
       const res = await this.$http.post('c_login',this.model)
        //sessionStorage.token=res.data.token
        localStorage.token=res.data.token
        this.$router.push('/')
        this.$message({
          type:'success',
          message:`欢迎您,${res.data.username}`
        })
      },
      async regist(){
        
        const res = await this.$http.post('register',this.model)
        this.$router.push('login')
        this.$message({
        type:'success',
        message:`注册成功,欢迎您${this.model.username}`
        
      })
      this.$router.go(0)
      },
      status_change1(){
        this.status=true;
        let obj0 = document.getElementById('signIn');
        obj0.style.borderBottom = "4px solid #3069D0";
        obj0.style.color="#3069D0"
        let obj1 = document.getElementById('register');
        obj1.style.borderBottom = "#000";
        obj1.style.color="#B7B7B7"
      },
      status_change2(){
        this.status=false;
        let obj2 = document.getElementById('register');
        obj2.style.borderBottom = "4px solid #3069D0";
        obj2.style.color="#3069D0"
        let obj3 = document.getElementById('signIn');
        obj3.style.borderBottom = "#000";
        obj3.style.color="#B7B7B7"
      }
    }
  }
  
</script>
<style>
 @import "../assets/css/signIn.css";
</style>

